<template>
  <div id="container"></div>
</template>
<script>
import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import { ConsoleWriter } from "istanbul-lib-report";
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  VisualMapComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);
export default {
  name: "pic",
  data() {
    return {
      month: "",
      list: [],
    };
  },
  mounted() {
    // 必须用箭头函数
    this.$bus.$on("changeIncomeList", async (month) => {
      this.month = month;
      let re = await this.$API.income.returnMonthIncome(month);
      if (re.status == 200) {
        this.list = re.data;
      }
      this.draw();
    }),
      this.$bus.$on("changeSpendingList", async (month) => {
        this.month = month;
        let re = await this.$API.table.returnMonthSpending(month);
        if (re.status == 200) {
          this.list = re.data;
        }
        this.draw();
      }),
      this.$bus.$emit("changeIncomeList", "2023-1");
    this.draw();
  },
  methods: {
    draw() {
      let chartDom = document.getElementById("container");
      let myChart = echarts.init(chartDom);
      let option;
      // prettier-ignore
      const dateList=this.list.map(item=>{
        return item.time
      })
      const valueList = this.list.map((item) => {
        return item.price;
      });
      option = {
        // Make gradient line here
        visualMap: [
          {
            show: false,
            type: "continuous",
            seriesIndex: 0,
            min: 0,
            max: 400,
          },
          {
            show: false,
            type: "continuous",
            seriesIndex: 1,
            dimension: 0,
            min: 0,
            max: dateList.length - 1,
          },
        ],
        title: {
          left: "center",
          top:10,
          text: "月收支",
          textStyle:{
            fontSize:17,
            fontWeight:'normal'
          }
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          data: dateList,
          axisLabel:{
            interval:0,
            rotate:-30
          }

        },
        yAxis: [{}],
        grid:{
          left:40,
          right:0,
          bottom:50
        },
        series: [
          {
            type: "line",
            showSymbol: false,
            data: valueList,
            smooth:true
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 420px;
}
</style>